<template>
<div class="shangjiaguanli">
  <h2>商家管理</h2>
  <ul>
    <li>
      <b>审核状态</b>
      <el-select v-model="state">
        <el-option
          v-for="item in lists"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </li>
    <li>
      <b>注册时间</b>
      <el-date-picker
        v-model="chooseDate"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        >
      </el-date-picker>
    </li>
    <li>
      <b>用户名</b>
      <el-input v-model="userName"></el-input>
    </li>
    <li>
      <el-button type="primary">查询</el-button>
    </li>

  </ul>
  <!--表格-->
  <el-table
    :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
    :highlight-current-row="true"
    style="width: 100%">
    <el-table-column
      align="center"
      label="用户名"
    >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="用户名"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.type }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="经理姓名"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.managerName }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="地区"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.area }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="固话"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.fixLine }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="注册时间"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.registerDate }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="状态"
      align="center"
      >
      <template slot-scope="scope">
        <span v-if="scope.row.state == '1'" style="margin-left: 10px;color: red">待审核</span>
        <span v-if="scope.row.state == '2'" style="margin-left: 10px;color: #ffd410">已退回</span>
        <span v-if="scope.row.state == '3'" style="margin-left: 10px;color: #0D0D0D">审核通过</span>
      </template>
    </el-table-column>

    <el-table-column
      label="认证记录"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px;color: #5193ff;cursor: pointer" @click="checkCertification(scope.$index,scope.row)">{{ scope.row.certification }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="广告记录"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px;color: #5193ff;cursor: pointer" @click="checkAdvert(scope.$index,scope.row)">{{ scope.row.advert }}</span>
      </template>
    </el-table-column>



    <el-table-column
      label="操作"
      width="250px"
      align="center"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleReset(scope.$index, scope.row)">重置密码</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination :current-page.sync="currentPage" @current-change="handleCurrentChange" :page-size="pageSize"
                 background layout=" prev, pager, next" :total="tableData.length">
  </el-pagination>

  <el-dialog :title="'认证会员到期时间:'+ this.certificationTime" :visible.sync="dialogTableVisible1" style="text-align: left">
    <h2 style="font-size: 20px;font-weight: normal">认证记录</h2>
    <el-table
      :data="certificationData.slice((currentPage2-1)*pageSize2, currentPage2*pageSize2)"
      border
    >
      <el-table-column property="date" label="日期" align="center"></el-table-column>
      <el-table-column property="order" label="订单号" align="center" ></el-table-column>
      <el-table-column property="type" label="获得方式" align="center"></el-table-column>
      <el-table-column property="langTime" label="时长" align="center"></el-table-column>
      <el-table-column property="money" label="金额" align="center"></el-table-column>
    </el-table>
    <el-pagination style="text-align: center" :current-page.sync="currentPage2" @current-change="handleCurrentChange2" :page-size="pageSize2"
                   background layout=" prev, pager, next" :total="certificationData.length">
    </el-pagination>
  </el-dialog>

  <el-dialog title="广告购买记录" :visible.sync="dialogTableVisible2" style="text-align: left">
    <el-table
      :data="advertData.slice((currentPage3-1)*pageSize3, currentPage3*pageSize3)"
      border
    >
      <el-table-column property="date" label="下单时间" align="center"></el-table-column>
      <el-table-column property="order" label="订单号" align="center" ></el-table-column>
      <el-table-column property="spec" label="规格" align="center"></el-table-column>
      <el-table-column property="showPosition" label="展示页面" align="center"></el-table-column>
      <el-table-column property="money" label="金额" align="center"></el-table-column>
      <el-table-column property="state" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state == '1'" style="margin-left: 10px;">展示中</span>
          <span v-if="scope.row.state == '2'" style="margin-left: 10px;">已下架</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align: center" :current-page.sync="currentPage3" @current-change="handleCurrentChange3" :page-size="pageSize3"
                   background layout=" prev, pager, next" :total="advertData.length">
    </el-pagination>
  </el-dialog>

  <el-dialog title="重置密码" :visible.sync="dialogTableVisible3" style="text-align: left;width: 60%;margin: 0 auto" >
      <h2 style="font-size:20px;font-weight: normal;margin-bottom: 20px">请输入新的密码</h2>
    <el-input style="width: 95%;" ></el-input>
    <span slot="footer" class="dialog-footer">
    <el-button>取 消</el-button>
    <el-button type="primary" @click="resetPwd">确 定</el-button>
  </span>
  </el-dialog>



</div>
</template>

<script>
    export default {
       data(){
         return{
           state:'',
           lists: [
             {
             value: '选项1',
             label: '黄金糕'
           },
             {
             value: '选项2',
             label: '双皮奶'
           },
           ],
           chooseDate:'',
           userName:'',
           tableData: [
             {
               date: '2016-05-02',
               name: '王小虎',
               type:'汽修汽配',
               managerName:'李',//经理姓名
               area: '上海市普陀',
               fixLine:'12345678911',//固话
               registerDate:'2018-01-01',
               state:'1',
               certification:'查看详情',//认证记录
               advert:'查看详情'//广告记录

             },
             {
               date: '2016-05-02',
               name: '王小虎',
               type:'汽修汽配',
               managerName:'李',//经理姓名
               area: '上海市普陀',
               fixLine:'12345678911',//固话
               registerDate:'2018-01-01',
               state:'2',
               certification:'查看详情',//认证记录
               advert:'查看详情'//广告记录

             },
             {
               date: '2016-05-02',
               name: '王小虎',
               type:'汽修汽配',
               managerName:'李',//经理姓名
               area: '上海市普陀',
               fixLine:'12345678911',//固话
               registerDate:'2018-01-01',
               state:'3',
               certification:'查看详情',//认证记录
               advert:'查看详情'//广告记录

             },
           ],
           pageSize: 2, // 每页数量
           currentPage: 1, //当前页
           certificationData:[
             {
               date:'2017-02-03',
               order:'666666',
               type:'1',
               langTime:'30',
               money:'20',
             },
             {
               date:'2017-02-03',
               order:'666666',
               type:'2',
               langTime:'365',
               money:'20',
             },
             {
               date:'2017-02-03',
               order:'666666',
               type:'1',
               langTime:'30',
               money:'200',
             }
           ],//认证详情数据
           advertData:[
             {
               date:'2017-02-03',
               order:'666666',
               spec:'首页，1天',//规格
               showPosition:'首页',
               money:'20',
               state:'1'
             },
             {
               date:'2017-02-03',
               order:'666666',
               spec:'二级页面，1年',//规格
               showPosition:'首页-国产',
               money:'20',
               state:'2'
             },
             {
               date:'2017-02-03',
               order:'666666',
               spec:'二级页面，1年',//规格
               showPosition:'首页-国产',
               money:'20',
               state:'2'
             },
           ],//广告详情数据
           certificationTime:'2024-12-26',
           dialogTableVisible1:false,//认证详情
           dialogTableVisible2:false,//广告详情
           dialogTableVisible3:false,//重置密码
           pageSize2: 1, // 认证详情每页数量
           currentPage2: 1, //认证详情当前页
           pageSize3: 2, // 广告详情每页数量
           currentPage3: 1, //广告详情当前页


         }
       },
      methods:{
        handleEdit(index, row) {
          console.log(index, row);
          this.$router.push('/edit')
        },
        handleDelete(index, row) {
          this.tableData.splice(index,1);
        },
        handleCurrentChange(val) {
          this.currentPage = val * 1
        },
        handleCurrentChange2(val){
          this.currentPage2 = val * 1
        },
        handleCurrentChange3(val){
          this.currentPage3 = val * 1
        },
        handleReset(index,row){
          console.log(index,row)
          this.dialogTableVisible3 = true;
        },
        checkCertification(index,row){
          this.dialogTableVisible1 = true;
        },
        checkAdvert(index,row){
          this.dialogTableVisible2 = true;
        },
        resetPwd(){
          this.dialogTableVisible3 = false
        }
      }
    }
</script>

<style scoped lang="scss">
.shangjiaguanli{
  width: 100%;
  h2{
    font-size: 30px;
    text-align: left;
    padding-left: 10px;
  }
  ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    li{
      margin-top: 30px;
      height: 40px;
      display: flex;
      line-height: 40px;
      justify-content: center;
      b{
        font-size: 18px;
        vertical-align: middle;
        margin-right: 10px;
      }
      &:nth-child(3){
        b{
          width: 100px;
        }
      }
    }

  }
  .el-table{
    margin-top: 40px;
  }
  .el-pagination{
    margin-top: 40px;
  }
}
</style>
